<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html PUBLIC "-//W3C//Ddiv HTML 4.01 divansitional//EN" "http://www.w3.org/div/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-81">
  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  <link href="${ctx.resource}/css/goals.css" rel="stylesheet">
  <link rel="stylesheet" href="/fitstart-mobile/resource/css/vendor/sm.min.new.css">
  <link rel="stylesheet" href="/fitstart-mobile/resource/css/courseware.css">
  <link rel="stylesheet" href="/fitstart-mobile/resource/css/component/qiniuplayer.min.css">
  <title>人马君</title>
</head>
  <body>
    <div class="page-group">
      <div class="page page-current courseware" style="background: #efeff4;">
        <header class="bar bar-nav fs-header-small">
          <a onclick="window.history.back();" class="icon icon-left pull-left"></a>
          <h1 class="title" style="font-weight: bold;">课程${session}</h1>
        </header>
        <div class="content">
          <div class="content-block no-margin text-center" style="padding: .5rem .75rem; background: #000;">
            <p style="margin: .25rem 0 0; font-size: 1.25rem; font-weight: bold; color: #fdd907;">${courseware.movement.name}</p>
          </div>
        
          <div class="train-item show-down">
            <div class="description-box">
              <div class="intro" style="height:auto;padding-bottom: 1rem;">
                <h6 class="intro-title no-margin">${courseware.groupAmount}组，每组${courseware.movementNumber}次</h6>
                <p class="category-box"><span class="category">类别: ${courseware.movement.category.name}</span><span class="equipment">器材：${courseware.movement.equipment.name}</span></p>
                <p style="display:block;">${courseware.remark}</p>
                  <c:choose>
                    <c:when test="${not empty courseware.movement.videoLink}">
                      <video id="vedio${courseware.id}" data-courseware="${courseware.id}" data-link="${courseware.movement.videoLink}" class="video-js vjs-big-play-centered"></video>
                    </c:when>
                    <c:otherwise>
                      <c:if test="${not empty courseware.movement.cover}">
                        <img src="${cloud.prod}/${courseware.movement.cover}" style="width: 100%;">
                      </c:if>
                    </c:otherwise>
                  </c:choose>
              </div>
             <!--  <a href="javascript:void(0);" class="button button-yellow done-button">DONE</a> -->
            </div>
          </div>
          
        </div>
      </div>
    </div>
    
    <script type="text/javascript" src="${ctx.resource}/js/vendor/zepto.js"></script>
    <script type="text/javascript" src="${ctx.resource}/js/vendor/sm-new.js"></script>
    <script type="text/javascript" src="${ctx.resource}/js/vendor/sm-extend-new.js"></script>
    <script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
    <script src="${ctx.resource}/js/component/qiniuplayer.min.js"></script>
    <script type="text/javascript">
      
      $youziku.load("body,p,span,a.div", "322f173b999b41e7872896f97e98cbe6", "Source-Han-Normal");
      $youziku.draw();
      
      $(document).ready(function(){
    	  $(document).on("click", ".scope-diet .diet-icon", function() {
              $(".scope-diet .diet-icon").removeClass("active");
              $(this).addClass("active");
          })
          $(".video-js").each(function() {
              var dataUrl = $(this).data("link");
              var courseware = $(this).data("courseware");
              var options = {
                  controls: false,
                  url: dataUrl,
                  type: 'hls',
                  preload: false,
                  autoplay: true,
                  width: 300,
                  height: 150,
                  stretching: 'letterbox'
                };
                
              var player = new QiniuPlayer('vedio'+courseware, options);
          })
          
        $(document).on("click", ".train-item .item", function(e) {
            e.preventDefault();
            if($(this).parent().hasClass('show-up')) {
                $(this).parent().removeClass('show-up').addClass('show-down');
                $(this).parent().find('.icon').addClass('icon-up').removeClass('icon-down');
            } else if($(this).parent().hasClass('show-down')) {
                $(this).parent().removeClass('show-down').addClass('show-up');
                $(this).parent().find('.icon').addClass('icon-down').removeClass('icon-up');
            }
        })
        
        $(document).on("click", ".done-button", function(e) {
            $(this).parents(".train-item").removeClass('show-down').addClass('show-up');
            $(this).parents('.train-item').find('.icon').addClass('icon-down').removeClass('icon-up');
        })
      })
      
      
    </script>
  </body>
</html>
